<template>
	<view class="content">
		<view class="buy">
			<uni-forms :label-width="80">
				<uni-forms-item label="品牌">
					<view class="buy-cell">
						<uni-tag :text="detail.brand" type="primary" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="产品">
					<view class="buy-cell">
						<radio-group @change="radioChange">
							<label
								class="buy-cell-label"
								v-for="(product, index) in products"
								:key="product.id"
							>
								<view>
									<radio
										color="#007aff"
										:value="String(index)"
										:checked="index === current"
									/>
								</view>
								<view>{{ product.title }}</view>
							</label>
						</radio-group>
					</view>
				</uni-forms-item>
				<uni-forms-item label="年限">
					<view class="buy-cell">
						<uni-data-select
							v-model="year"
							style="width: 100%"
							:localdata="range"
							@change="onChangeYear"
							:clear="false"
						></uni-data-select>
					</view>
				</uni-forms-item>
				<uni-forms-item label=" ">
					<view class="buy-cell">
						<switch color="#007aff" :checked="detail.wildcard" disabled />
						<text>通配我需要通配符/泛域名 (*.example.com)</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="通用名称">
					<view class="buy-cell">
						<uni-easyinput
							v-model="commonName"
							:placeholder="commonNamePlaceholder"
						></uni-easyinput>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="buy-desc">默认：CRS 自动创建 RSA 2048 SHA256</view>
			<view class="buy-nav">
				<text class="buy-nav-price">{{ totalAmount }} 元</text>
				<button
					type="primary"
					style="width: 200px; margin: 0; background-color: #007aff"
					@click="onClick"
				>
					立即购买
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex'
import { createOrder } from '../../../api/order'
import { pay } from '../../../utils'
import { toast } from '../../../utils/native'

export default {
	data() {
		return {
			detail: {},

			products: [],

			current: 0,

			year: 1,

			range: [
				{ value: 1, text: '1年' },
				{ value: 2, text: '2年' },
				{ value: 3, text: '3年' }
			],

			commonName: '',
			commonNamePlaceholder: ''
		}
	},

	computed: {
		totalAmount() {
			const { year, detail } = this
			return detail.price * year
		}
	},

	methods: {
		...mapActions('user', ['login']),

		radioChange(e) {
			console.log(e)
			this.detail = this.products[e.detail.value]
			this.setCommonName()
			console.log(this.detail)
		},

		onChangeYear(e) {
			console.log(e)
		},

		setCommonName() {
			if (this.detail.wildcard) {
				this.commonNamePlaceholder = '*.example.com'
				this.commonName = '*.'
			} else {
				this.commonNamePlaceholder = 'www.example.com'
				this.commonName = ''
			}
		},

		onClick() {
			const { year, commonName, detail, totalAmount } = this
			const { id: pid } = detail
			// todo
			// 第一次请求时，使用{ year, commonName, pid, totalAmount }
			// 第二次请求时，传递第一次请求返回的内容
			// 支付成功后，需请求接口查询一下状态
			// #ifdef MP-WEIXIN
			const method = 'smallApp'
			// #endif
			// #ifdef H5
			const method = 'h5'
			// #endif
			if (commonName) {
				createOrder({
					year,
					commonName,
					pid,
					totalAmount,
					method
				}).then((data) => {
					pay(data)
				})
			} else {
				toast('请填写通用域名')
			}
		}
	},

	onLoad() {
		this.login(() => {
			uni.navigateBack()
		}).then(() => {
			this.detail = uni.getStorageSync('productDetail')
			this.products = uni.getStorageSync('products')
			this.current = this.products.findIndex((pro) => pro.id === this.detail.id)
			this.setCommonName()
			console.log(this.detail, this.products)
		})
	}
}
</script>

<style lang="scss" scoped>
.content {
	background-color: white;
}

.buy {
	padding: 16px;

	&-cell {
		height: 100%;
		display: flex;
		align-items: center;
		word-break: break-all;

		&-label {
			display: flex;
		}

		&-label + &-label {
			margin-top: 8px;
		}
	}

	&-desc {
		color: #999;
		font-size: 12px;
	}

	&-nav {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid #eee;

		&-price {
			color: crimson;
			font-size: 20px;
		}
	}
}
</style>
